<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/javascripts/jquery-3.6.0.js" type="text/javascript"></script>
    <script>
        console.log(jQuery)
    </script>
</head>

<body>

    {% extends "views/filesystem.html" %}

    {% block right %}
        
        {% block search %}
            <div class="searchUser">
                <form method="post" action="/filesystem/rolesearch" name="form">
                    <label for="username">姓名：</label>
                    <input type="text" name="username">
                    <label for="phone">手机号：</label>
                    <input type="text" name="phone" id="phone">
                    <label>角色：</label>
                    <select name="roleid" onchange="">
                        <option value="">请选择角色</option>
                        {% for role in roleinfo %}
                            <option value="{{role.roleid}}">{{role.rolename}}</option>
                        {% endfor %}
                    </select>
                    <input type="submit" value="搜索">
                </form>
                <form method="get" style="position: relative;top: 10px;" action="/filesystem/addUserPage">
                    <input type="submit" value="新增用户">
                </form>
            </div>
        {% endblock %}
        
        {% block showdata %}
            <table class="table" border="1" style="margin-top: 20px;border-collapse: collapse;border: 2px solid #0000ff">
                <thead style="border: 2px solid #0000ff">
                    <tr>
                        <th>姓名</th>
                        <th>手机号</th>
                        <th>角色</th>
                        <th>操作</th>
                    </tr>
                </thead>
                
                <tbody style="border: 2px solid #0000ff">
                    {% for userdata in showData %}
                        <tr>
                            <td>{{userdata.username}}</td>
                            <td>{{userdata.phone}}</td>
                            <td>{{userdata.rolename}}</td>
                            <td>
                                <form method="get" action="" name="alterForm" class="alterForm">
                                    <input name="username" type="hidden" value="{{userdata.username}}">
                                    <!-- <input class="reset" name="reset" type="button" value="重置密码">
                                    <input class="alter" name="alter" type="button" value="修改"> -->
                                    <input class="dele" name="delete" type="button" value="删除">
                                </form>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            <script>
                                    
                let alterForm = document.querySelectorAll('.alterForm')
                let dele = document.querySelectorAll('.dele')
                
                for(let i=0;i<dele.length;i++) {
                    dele[i].onclick = function() {
                        alterForm[i].action = '/filesystem/deleteUser'
                        alterForm[i].submit()
                    }
                }
        
            </script>
        {% endblock %}
    {% endblock %}

</body>
</html>